<template>
  <div class="v-home z-col">
    <!-- 头 -->
    <z-block class="top z-row" justify="between" align="center" basis=".3rem">
      <div class="z-row">
        <img :src="'../public/img/home/favicon.png'" />
        <p>{{ title }}</p>
      </div>
      <z-block class="z-row" align="center" auto="0" basis="auto">
        <el-tree-select
          size="small"
          v-model="selectId"
          @change="selectMenu($event)"
          :data="menu"
          node-key="pageId"
          :props="selectMenuProp"
          :render-after-expand="false"
          default-expand-all
          filterable
        />
        <PersonalCenter style=""></PersonalCenter>
        <el-popconfirm
          confirm-button-text="是"
          cancel-button-text="否"
          icon="InfoFilled"
          icon-color="#626AEF"
          title="确定退出系统?"
          @confirm="exit"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-icon
              class="logoutIconClass"
              style="margin-left: 10px; cursor: pointer"
            >
              <SwitchButton />
            </el-icon>
          </template>
        </el-popconfirm>
      </z-block>
    </z-block>
    <!-- 标签 -->
    <el-tabs v-model="selectId" @tab-remove="tabRemove" closable class="z-col">
      <el-tab-pane
        v-for="item in menuTabList"
        :key="item.pageId"
        :label="item.pageName"
        :name="item.pageId"
      >
        <component
          class="z-tab-body"
          v-if="sysName == item.params.xtm"
          :is="$loadCom(item)"
        />
        <iframe
          v-else-if="item.params.xtm == 'iframe'"
          :src="item.pageUrl"
        ></iframe>
        <iframe
          v-else
          :src="
            '../' +
            item.params.xtm +
            '/#' +
            item.pageUrl.replace(item.params.xtm, '')
          "
        ></iframe>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { SwitchButton } from "@element-plus/icons-vue";
import PersonalCenter from "./PersonalCenter.vue";
import { sysName } from "@ui/vue/router/addRoute";
import { use } from "./use";
defineOptions({
  name: "v-home",
});
const {
  title,
  selectId,
  menu,
  selectMenu,
  selectMenuProp,
  menuTabList,
  tabRemove,
  exit,
  cancelEvent,
} = use();
</script>
<style lang="scss">
.v-home {
  > div {
    width: 100%;
  }
  > .top {
    align-items: center;
    background-color: var(--color-primary-2);
    box-shadow: rgba(0, 0, 0, 0.1) 0 0.05rem 0.15rem;
    padding: 0 0.1rem;
    color: var(--color-font-3);
    div,
    img {
      height: 0.25rem;
      line-height: 0.25rem;
    }
    img {
      margin-right: 0.5em;
    }
    .el-select {
      width: 2.4rem;
      margin-right: 0.1rem;
    }
  }
  > .el-tabs {
    width: 100%;
    flex-grow: 1;
    flex-basis: 0;
    overflow: hidden;
    .el-tabs__header {
      margin-bottom: 0.08rem;
      width: 100%;
    }
    .el-tabs__item {
      height: 0.3rem;
    }
    .el-tabs__nav {
      padding: 0 0.1rem;
    }
    .el-tabs__content {
      flex-grow: 1;
      flex-basis: 0;
      position: relative;
      width: 100%;
      .el-tab-pane,
      .z-tab-body {
        width: 100%;
        height: 100%;
      }
    }
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
</style>
